<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="350px"
    title="批量设置"
    :style="{ top: '20px' }"
  >
    <a-space>
      <span>{{ componentType.title }}:</span>
      <div style="width: 150px" v-if="['unit'].includes(componentType.code)">
        <unit-selector v-model:value="batchValue" v-bind="componentType.attr" />
      </div>
      <div style="width: 150px" v-if="['price', 'number'].includes(componentType.code)">
        <a-input-number
          style="width: 100%"
          v-model:value="batchValue"
          v-bind="componentType.attr"
        />
      </div>
      <div style="width: 150px" v-if="['available'].includes(componentType.code)">
        <a-select
          style="width: 100%"
          v-model:value="batchValue"
          v-bind="componentType.attr"
          allow-clear
        >
          <a-select-option
            v-for="item in _This().$enums.AVAILABLE.values()"
            :key="item.code"
            :value="item.code"
          >
            {{ item.desc }}
          </a-select-option>
        </a-select>
      </div>
    </a-space>
    <template #footer>
      <div class="form-modal-footer">
        <a-space>
          <a-button type="primary" html-type="submit" @click="confirm"> 确认 </a-button>
          <a-button @click="closeDialog">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue';
  import UnitSelector from '@/components/Selector/src/UnitSelector.vue';

  defineOptions({
    name: 'BatchSetting',
  });

  // this对象
  const instance = getCurrentInstance();

  const emit = defineEmits(['confirm', 'close']);

  const visible = ref(false);

  const componentType = ref({});

  const field = ref('');

  const batchValue = ref(null);

  // 打开弹窗
  const openDialog = (fieldId, code, title = '', attr = {}) => {
    visible.value = true;
    field.value = fieldId;
    componentType.value = {
      code: code,
      title: title,
      attr: attr,
    };
    batchValue.value = null;
  };

  // 关闭对话框
  const closeDialog = () => {
    visible.value = false;
    emit('close');
  };

  // 确认
  const confirm = () => {
    emit('confirm', field.value, batchValue.value);
    closeDialog();
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
